<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv=" X-UA-Compatible " content="ie=edge ">
    <title>转账</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body class="zz_body">
    <div class="h40 ac">
        转账
    </div>
    <div class="nav_tab">
        <div class="sao">
            <div></div>
            <p></p>
            <i></i>
        </div>
        <div class="bg_addr">
            <div></div>
            <p></p>
            <i></i>
        </div>
        <div class="num">
            <div></div>
            <p></p>
            <i></i>
        </div>
    </div>
    <div class="input_lasts">
        <label class="h45 user_id">
            <i></i>
            <input type="text" placeholder="请输入账号">
        </label>
        <label class="h45 user_addr">
            <i></i>
            <input type="text" placeholder="请输入钱包地址">
            <span></span>
        </label>
        <label class="h45 user_num">
            <i></i>
            <input type="text" placeholder="请输入数量">
        </label>
        <p class="ar">余额：112.521</p>
        <button type="button" class="h30 gradient_btn">确定转出</button>
    </div>
    <div class="zz_details_wrap">
        <div class="zz_details_bg">
            <ul class="zz_details_s1">
                <li data="tab1">
                    <a href="javascript:;">输入明细</a>
                </li>
                <li data="tab2">
                    <a href="javascript:;">转出明细</a>
                </li>
            </ul>
            <div class="zz_details_tab tab1">
                <ul class="zz_details_s2">
                    <li class="active">
                        <a data-time="zr_d1" href="javascript:;">最近2个月</a>
                    </li>
                    <li>
                        <a data-time="zr_d2" href="javascript:;">最近4个月</a>
                    </li>
                    <li>
                        <a data-time="zr_d3" href="javascript:;">最近8个月</a>
                    </li>
                    <li>
                        <a data-time="zr_d4" href="javascript:;">最近1年</a>
                    </li>
                    <li>
                        <a data-time="zr_d5" href="javascript:;">全部</a>
                    </li>
                </ul>
                <div class="zz_details_lists zr_d zr_d1">
                    <ul>
                        <li>
                            收款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                        </li>
                        <li style="text-align:right;width:100%;">
                            2018-06-28 16:54:21
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zr_d zr_d2">
                    <ul>
                        <li>
                            收款-liu588dsfsd688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            jhggfghghgfh
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zr_d zr_d3">
                    <ul>
                        <li>
                            收款-hogndsfsadfsd
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zr_d zr_d4">
                    <ul>
                        <li>
                            收款-xiondfdsfklasdjlk
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zr_d zr_d5">
                    <ul>
                        <li>
                            收款-zhidkfjaskldjfal
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="zz_details_tab tab2">
                <ul class="zz_details_s2">
                    <li class="active">
                        <a data-time="zz_d1" href="javascript:;">最近2个月</a>
                    </li>
                    <li>
                        <a data-time="zz_d2" href="javascript:;">最近4个月</a>
                    </li>
                    <li>
                        <a data-time="zz_d3" href="javascript:;">最近8个月</a>
                    </li>
                    <li>
                        <a data-time="zz_d4" href="javascript:;">最近1年</a>
                    </li>
                    <li>
                        <a data-time="zz_d5" href="javascript:;">全部</a>
                    </li>
                </ul>
                <div class="zz_details_lists zz_d zz_d1">
                    <ul>
                        <li>
                            收款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zz_d zz_d2">
                    <ul>
                        <li>
                            收款-liu588dsfsd688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            jhggfghghgfh
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zz_d zz_d3">
                    <ul>
                        <li>
                            收款-hogndsfsadfsd
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zz_d zz_d4">
                    <ul>
                        <li>
                            收款-xiondfdsfklasdjlk
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
                <div class="zz_details_lists zz_d zz_d5">
                    <ul>
                        <li>
                            收款-zhidkfjaskldjfal
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            付款-liu588688sadf8
                            <span>+21.00</span>
                        </li>
                        <li>
                            cakjhsdjkfhsadjkhfsdfhsdf
                            <span>2018-06-28 16:54:21</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <div class="mash_wrapper">
        <div class="mash_main">
            <img src="img/ewm.png" alt="">
        </div>
    </div>

    <footer>
        <div>
            <a href="1-1区块链.html">
                <i>
                    <img src="img/qkl.png" alt="区块链">
                </i>
                区块链
            </a>
        </div>
        <div class="active">
            <a href="3-1转账.html">
                <i>
                    <img src="img/zz_active.png" alt="转账">
                </i>
                转账
            </a>
        </div>
        <div>
            <a href="javascript:;">
                <i>
                    <img src="img/wk.png" alt="挖矿">
                </i>
                挖矿
            </a>
        </div>
        <div>
            <a href="4-1我的.html">
                <i>
                    <img src="img/my.png" alt="我的">
                </i>
                我的
            </a>
        </div>
    </footer>

    <script src="js/jquery.min.js"></script>
    <script>
        $('.zz_details_s1 li').on('click', function () {
            $val = $(this).attr('data');
            $(this).addClass('active').siblings().removeClass('active');
            $('.zz_details_tab').removeClass('active');
            $('.zz_details_tab.' + $val).addClass('active');
            $("." + $val + ">ul>li").eq(0).addClass("active").siblings().removeClass("active");
            $("." + $val + ">div").eq(0).addClass("active").siblings().removeClass("active");
        })

        $('.zz_details_s2').on('click', 'a', function () {
            $dataTime = $(this).attr('data-time');
            $(this).parent().addClass('active').siblings().removeClass();
            $('.zz_details_lists').removeClass('active');
            $('.zz_details_lists.' + $dataTime).addClass('active');
        })

        $(function () {
            $('.zz_details_s1 li').eq(0).addClass('active');
            $('.zz_details_tab').eq(0).addClass('active');
            $('.zr_d').eq(0).addClass('active');
            $('.zz_d').eq(0).addClass('active');
        })

        $('.num').on('click', function () {
            $(".mash_wrapper").show();
        })
        $('.mash_wrapper').on('click', function () {
            $(".mash_wrapper").hide();
        })
    </script>
</body>

</html>